<template>
  <el-form
    size="small"
    :model="formData"
    class="form"
    label-width="70px"
    label-position="right"
    style="--el-color-primary: #1aa1fb; --el-text-color-primary: #42464e"
    @click.stop=""
  >
    <el-form-item label="任务编码" class="form-item">
      <el-input
        v-model="formData.code"
        placeholder="请输入任务编码"
        v-if="activeKey === 'code'"
      />
      <div class="custom" @click.stop="handleCustom('code')" v-else>
        {{ formData.code }}
      </div>
    </el-form-item>

    <el-form-item label="任务类型" class="form-item">
      <el-select
        v-if="activeKey === 'taskTypeId'"
        v-model="formData.taskTypeId"
        placeholder="请选择任务类型"
      >
        <el-option
          v-for="item in taskList"
          :key="item.id"
          :label="item?.name?.['zh_CN']"
          :value="item.id"
        >
          <div
            style="
              display: flex;
              align-items: center;
              justify-content: space-between;
              width: 100%;
            "
          >
            <div>
              {{ item?.name?.["zh_CN"] }}
            </div>
            <img
              v-if="item.id === formData.taskTypeId"
              style="display: inline-block"
              src="@/assets/wbs/selected.svg"
              alt=""
            />
          </div>
        </el-option>
      </el-select>
      <div class="custom" @click.stop="handleCustom('taskTypeId')" v-else>
        {{
          taskList.find((e) => e.id === formData.taskTypeId)?.name?.["zh_CN"]
        }}
      </div>
    </el-form-item>

    <el-form-item label="优先级" class="form-item">
      <el-select
        v-if="activeKey === 'priority'"
        v-model="formData.priority"
        placeholder="请选择任务类型"
      >
        <el-option
          style="display: flex; align-items: center; justify-content: center"
          v-for="item in prioritys"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
          <div
            style="
              display: flex;
              align-items: center;
              justify-content: space-between;
              width: 100%;
            "
          >
            <el-tag
              style="
                display: flex;
                align-items: center;
                justify-content: center;
                border: none;
              "
              :color="item?.bg ?? 'gray'"
            >
              <div :style="{ color: item.color }">{{ item.label }}</div>
            </el-tag>
            <img
              v-if="item.value === formData.priority"
              style="display: inline-block"
              src="@/assets/wbs/selected.svg"
              alt=""
            />
          </div>
        </el-option>
        <template #label>
          <el-tag :color="selectpriorityList?.bg ?? 'gray'">
            <div :style="{ color: selectpriorityList?.color }">
              {{ selectpriorityList?.label }}
            </div>
          </el-tag>
        </template>
      </el-select>

      <div class="custom" @click.stop="handleCustom('priority')" v-else>
        <el-tag :color="selectpriorityList?.bg ?? 'gray'" style="border: none">
          <div :style="{ color: selectpriorityList?.color }">
            {{ selectpriorityList?.label }}
          </div>
        </el-tag>
      </div>
    </el-form-item>

    <el-form-item label="任务进度" class="form-item">
      <el-progress
        style="width: 100%"
        :percentage="formData?.lifecycleCurrentNode?.process ?? 0"
      />
    </el-form-item>

    <el-form-item label="里程碑" class="form-item">
      <el-switch
        v-model="formData.isMilestone"
        style="--el-switch-on-color: #1aa1fb; --el-switch-off-color: #b9dffe"
      />
    </el-form-item>

    <el-form-item label="负责人" class="form-item">
      <el-select
        v-if="activeKey === 'curator'"
        v-model="formData.curator"
        placeholder="请选择负责人"
      >
        <template #label="{ label, value }">
          <div style="display: flex; align-items: center">
            <img
              style="
                width: 16px;
                height: 16px;
                border-radius: 50%;
                margin-right: 3px;
              "
              :src="userList.find((i) => i.id === value)?.avatar"
              alt=""
            />
            <span style="font-weight: bold">{{ label }}</span>
          </div>
        </template>
        <el-option
          v-for="ele in userList"
          :key="ele.id"
          :label="ele.name"
          :value="ele.id"
        >
          <div style="display: flex; align-items: center">
            <img
              style="
                width: 16px;
                height: 16px;
                border-radius: 50%;
                margin-right: 3px;
              "
              :src="ele?.avatar"
              alt=""
            />
            <div>{{ ele.name }}</div>
          </div>
        </el-option>
      </el-select>

      <div class="custom" @click.stop="handleCustom('curator')" v-else>
        <div v-if="!formData.curator">请选择负责人</div>
        <div v-else>
          <div
            style="display: flex; align-items: center"
            v-for="element in userList.filter((i) => i.id === formData.curator)"
          >
            <img
              style="
                width: 16px;
                height: 16px;
                border-radius: 50%;
                margin-right: 3px;
              "
              :src="element?.avatar"
              alt=""
            />
            <span style="font-weight: bold">{{ element?.name }}</span>
          </div>
        </div>
      </div>
    </el-form-item>

    <el-form-item label="执行人" class="form-item">
      <el-select
        v-if="activeKey === 'memberVOList'"
        v-model="formData.memberVOList"
        multiple
        placeholder="请选择执行人"
      >
        <template #label="{ label, value }">
          <div style="display: flex; align-items: center">
            <img
              style="
                width: 16px;
                height: 16px;
                border-radius: 50%;
                margin-right: 3px;
              "
              :src="userList.find((i) => i.id === value)?.avatar"
              alt=""
            />
            <span style="font-weight: bold">{{ label }}</span>
          </div>
        </template>
        <el-option
          v-for="ele in userList"
          :key="ele.id"
          :label="ele.name"
          :value="ele.id"
        >
          <div style="display: flex; align-items: center">
            <img
              style="
                width: 16px;
                height: 16px;
                border-radius: 50%;
                margin-right: 3px;
              "
              :src="ele?.avatar"
              alt=""
            />
            <div>{{ ele.name }}</div>
          </div>
        </el-option>
      </el-select>

      <div class="custom" @click.stop="handleCustom('memberVOList')" v-else>
        <div v-if="!formData.memberVOList?.length">请选择执行人</div>
        <div v-else>
          <div
            style="display: flex; align-items: center"
            v-for="element in userList.filter((i) =>
              formData.memberVOList.includes(i.id),
            )"
          >
            <img
              style="
                width: 16px;
                height: 16px;
                border-radius: 50%;
                margin-right: 3px;
              "
              :src="element?.avatar"
              alt=""
            />
            <span style="font-weight: bold">{{ element?.name }}</span>
          </div>
        </div>
      </div>
    </el-form-item>
    <el-form-item label="计划日期" class="form-item">
      <el-date-picker
        v-if="activeKey === 'planned'"
        :clearable="false"
        v-model="formData.planned"
        type="daterange"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        value-format="YYYY-MM-DD HH:mm:ss"
        range-separator="~"
      />

      <div class="custom" @click.stop="handleCustom('planned')" v-else>
        <div v-if="!formData.planned[0] && !formData.planned[1]">
          请选择计划日期
        </div>
        <span v-else
          >{{ formData.planned[0]?.substring(0, 10) }} ~
          {{ formData.planned[1]?.substring(0, 10) }}</span
        >
      </div>
    </el-form-item>
    <el-form-item label="计划工期" class="form-item">
      <el-input-number
        v-if="activeKey === 'plannedDurationDay'"
        v-model="formData.plannedDurationDay"
        :min="0"
      />
      <div
        class="custom"
        @click.stop="handleCustom('plannedDurationDay')"
        v-else
      >
        {{ formData.plannedDurationDay }} 个工作日
      </div>
    </el-form-item>
    <el-form-item label="实际日期" class="form-item">
      <el-date-picker
        v-if="activeKey === 'actual'"
        :clearable="false"
        v-model="formData.actual"
        type="daterange"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        value-format="YYYY-MM-DD HH:mm:ss"
        range-separator="~"
      />
      <div class="custom" @click.stop="handleCustom('actual')" v-else>
        <div v-if="!formData.actual[0] && !formData.actual[1]">
          请选择实际日期
        </div>
        <div v-else>
          {{ formData.actual[0]?.substring(0, 10) }} ~
          {{ formData.actual[1]?.substring(0, 10) }}
        </div>
      </div>
    </el-form-item>
    <el-form-item label="实际工期" class="form-item">
      <el-input-number
        v-model="formData.actualHours"
        :min="0"
        v-if="activeKey === 'actualHours'"
      />
      <div class="custom" @click.stop="handleCustom('actualHours')" v-else>
        {{ formData.actualHours }} 个工作日
      </div>
    </el-form-item>
  </el-form>
</template>

<script setup lang="ts">
  import { ref, watch, onMounted, computed } from "vue";
  const props = defineProps(["data", "detail"]);
  const emit = defineEmits();
  import { getTaskTypeList, getProjectRoleUserList } from "./api";

  const prioritys = [
    {
      value: 100,
      bg: "#D54941",
      color: "#FFFFFF",
      label: "紧急",
    },
    {
      value: 80,
      bg: "#FFEBE8",
      color: "#AD352F",
      label: "高",
    },
    {
      value: 60,
      bg: "#E9F0FF",
      color: "#078AE2",
      label: "中",
    },
    {
      value: 40,
      bg: "#F2F2F2",
      color: "#86909C",
      label: "低",
    },
  ];

  const selectpriorityList = computed(() =>
    prioritys.find((e) => Object.is(formData.value.priority, e.value)),
  );

  const formData = ref<any>(
    props?.data ?? {
      code: "",
      taskTypeId: "",
      priority: "",
      lifecycleCurrentNode: {
        process: 0,
      },
      isMilestone: true,
      curator: "",
      memberVOList: "",
      plannedStartTime: "",
      plannedDurationDay: "",
      actualEndTime: "",
      actualHours: "",
      like: "",
      name: { zh_CN: "" },
    },
  );

  const taskList = ref<any[]>([]);
  const userList = ref<any[]>([]);
  const activeKey = ref("");

  /**
   * @description 处理行点击
   */
  const handleCustom = (key: string) => {
    activeKey.value = key;
  };

  /**
   * @description 获取任务类型列表
   */
  const getTaskType = async () => {
    try {
      const params = {
        pageNo: 1,
        pageSize: 99999,
      };
      const res = await getTaskTypeList(params);
      taskList.value = res.result ?? [];
    } catch (error) {}
  };

  /**
   * @description 获取角色列表
   */

  const getUserList = async () => {
    try {
      if (props?.detail?.projectId) {
        const params = {
          pageNo: 1,
          pageSize: 99999,
        };
        const res = await getProjectRoleUserList(
          props.detail?.projectId,
          "ALL",
          params,
        );
        userList.value = res.result?.map((ele: any) => ele.user) ?? [];
      }
    } catch (error) {}
  };

  onMounted(() => {
    getTaskType();
    getUserList();
  });

  const onceWatch = watch(
    () => props.data,
    () => {
      formData.value = props.data;
      onceWatch();
    },
    { deep: true },
  );

  watch(
    () => props.detail,
    () => {
      getUserList();
    },
  );

  watch(
    () => formData,
    () => {
      emit("update:data", formData.value);
    },
    { deep: true },
  );
</script>

<style scoped lang="scss">
  :deep(.el-input-number--small .el-input--small .el-input__wrapper) {
    padding: 0;
  }
  :deep(.el-form-item--small) {
    margin-bottom: 5px;
  }

  .form {
    box-sizing: border-box;
    height: calc(100vh - 78px);
    overflow: auto;
    .form-item {
      height: 32px;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
    }
    .process {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      width: 100%;
    }
  }

  .custom {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-sizing: border-box;
    color: #86909c;
    font-size: 13px;
    padding: 4px;
    cursor: pointer;
    max-width: 200px;
    width: 100%;
    height: 32px;
    &:hover {
      background-color: rgba(0, 0, 0, 0.06);
      border-radius: 4px;
    }
  }
</style>
